<!--
 * @Descripttion: 使用金牌话术
 * @Author: yansu
 * @Date: 2020-09-22 15:55:42
 * @LastEditors: yansu
 * @LastEditTime: 2020-11-23 12:40:33
-->
<template>
    <div class="wrap">
        <el-row class="top">
            <el-col>
                <div class="content">
                    <div class="process" v-for="(item,index) in nodeList" :key="item.id" >
                    <div class="contentList" :class="{'publish':item.success,'current':currentIndex === index}" :title="item.title" @click="selectProcess(index)">
                            {{item.title}}
                            <div class="logo" v-if="item.success">
                                <i class="el-icon-check"></i>
                            </div>
                        </div> 
                        <div class="line" v-if="index !== nodeList.length - 1" :class="{'current':item.success}">
                            <span></span>
                            <i></i>
                        </div>
                    </div>
                    <el-divider></el-divider>
                </div>
            </el-col>
        </el-row>
        <div class="recommend" v-for="(item,index) in recommendList" :key="index" >
            <div class="recommend_content" v-html="item.value" :class="{'currentWords':item.success}" v-if="item.value"></div>
            <div class="logo" v-if="item.value && item.success">
                <i class="el-icon-check"></i>
            </div>
        </div>
    </div>
</template>
<script>
import { deepClone } from '@/utils/m7Utils.js'

export default {
    props:{
        usingData:{
            type:Object,
            required:true
        },
    },
    data(){
        return {
            currentIndex:0,
            recommendList:[],
            isFirst:true,
            matchData:[],
            recommendMatchData:[]
        }
    },
    methods:{
        match(item){
            let data = item || [];
            let tempId =""
            if(data.length){
                //说明之前匹配过
                tempId = Number(window.sessionStorage.getItem('intelligentId'));
                this.isFirst = false;
            }else{
                tempId = 0
                return
            }
            this.matchData = deepClone(data)
            this.recommendList = [];
            this.nodeList.forEach((item,index)=>{
                data.forEach((ele,idx)=>{
                    if(item.title == ele.answer){
                        item.success = true;
                    }
                })
            })
            let arrLength = Number(this.nodeList.length)
            if(this.isCalling && this.currentId == this.$route.params.id) {
                if(tempId == arrLength - 1){
                    this.selectProcess(tempId)
                }else{
                    //遍历data中，找出nodelist对应的index值，比tempId大的里选最大的，就跳过去
                    let indexArr = []
                    this.nodeList.forEach((item,idx)=>{
                        data.forEach((ele,sort)=>{
                            if(item.title == ele.answer){
                                indexArr.push(idx)
                            }
                        })
                    })
                    let maxIndex = Math.max(...indexArr)
                    if(maxIndex <= tempId){
                        this.selectProcess(tempId +1)
                    }else{
                        if(maxIndex == this.nodeList.length -1){
                            this.selectProcess(maxIndex)
                        }else{
                            this.selectProcess(maxIndex +1)
                        }
                    }

                }
            }
        },
        back(){
            this.$emit ('back')
        },
        selectProcess(index){
            this.currentIndex = index;
            this.recommendList = this.nodeList[index].question?this.nodeList[index].question:[];
            if(!this.isCalling){
                let dataList = this.matchData.length?this.matchData:this.recommendMatchData
                this.recommendList.forEach((item,index2)=>{
                    dataList.forEach((ele,idx)=>{
                        if(item.value && item.value == ele.question){
                            item.success = true
                        }
                    })
                })
            }else{
                this.recommendList.forEach((item,index2)=>{
                this.$store.state.call.recommendMatch.forEach((ele,idx)=>{
                        if(item.value && item.value == ele.question){
                            item.success = true
                        }
                    })
                })
            }
        }
    },
    mounted(){
    },
    computed:{
        showUse(){
            if(this.isCalling && this.$store.state.cti.globalLet.currentCallSheetId == this.$route.params.id){
                return true
            }else{
                return false
            }
        },
        tabType(){
            //当前tab页
            return this.$route.path.split("/")[3]
        },
        currentId() {
            //当前通话id
            return this.$store.state.cti.globalLet.currentCallSheetId;
        },
        isCalling() {
            //正在通话
            return this.$store.state.cti.globalLet.isCalling;
        },
        //根据linkDataArray的对应关系，把nodeDataArray的顺序重新排列
        nodeList(){
            console.log(this.usingData);
            let linkRelation = [];
            let node = deepClone(this.usingData.talk_flow.nodeDataArray) ;
            let relation = deepClone(this.usingData.talk_flow.linkDataArray);
            relation.forEach((item,index)=>{
                linkRelation.push(item.to)
            })
            console.log(linkRelation,'关系数组');
            node.sort(function(a,b){
                return linkRelation.indexOf(a.key) - linkRelation.indexOf(b.key)
            })
            let arr =  node.map(function(a){
                return a;
            });
            console.log(arr);
            return arr
            // return this.usingData.talk_flow.nodeDataArray
        }
    },
    watch:{
         isCalling: {
            handler: function (val) {
               if(!val){
                   this.isFirst = true;
                   this.$store.commit('call/INTELLIGENT_MATCH',{})
               }
            },
            immediate: true,
        },
        "$store.state.call.recommendMatch":function(val){
            if(val.length){
                let matchData = {
                    _id:this.$route.params.id,
                    tabType:this.tabType,
                    data:val
                }
                this.recommendMatchData = deepClone(val)
                this.$store.commit('call/MATCH_DATA',matchData)
                console.log(val,'socket推送匹配列表');
                this.recommendList = [];
                this.nodeList.forEach((item,index)=>{
                    val.forEach((ele,idx)=>{
                        if(item.title == ele.answer){
                            item.success = true;
                            if(this.isFirst){
                                if(index != this.nodeList.length-1){
                                    this.selectProcess(index + 1);
                                    this.isFirst = false
                                }else{
                                    this.selectProcess(index);
                                    this.isFirst = false
                                }
                                window.sessionStorage.setItem('intelligentId',index);
                            }else{
                                this.$nextTick(()=>{
                                    let memoryId =Number(window.sessionStorage.getItem('intelligentId'));
                                    let curIndex = Number(index)
                                    console.log(memoryId,'第一次命中的index');
                                    console.log(curIndex,'当前命中的index');
                                    if(memoryId !== this.nodeList.length - 1){//第一次命中的不是最后一个话术
                                        if(curIndex > memoryId){
                                            window.sessionStorage.setItem('intelligentId',curIndex)
                                            if(curIndex !== this.nodeList.length - 1){
                                            //新命中的话术在第一次的流程之后且不是最后一个话术
                                                this.selectProcess(curIndex + 1);
                                            }else{
                                            //新命中的话术是最后一个
                                                this.selectProcess(curIndex);
                                            }
                                        }else{
                                            //新命中的在第一次命中的流程之前，还是选择展开第一次的
                                            this.selectProcess(memoryId + 1)
                                        }
                                    }else{
                                        //第一次命中的是最后一个话术，以后就展示最后一个话术
                                        this.selectProcess(memoryId)
                                    }
                                })
                            }
                        }
                    })
                })
            }
        },
    },
    
}
</script>

<style lang="stylus" scoped>
.wrap{
    position relative
    height 100%
    
    .top{
        position: -webkit-sticky;
        position sticky
        top 0
        background white
        overflow hidden
        .using{
            text-align right;
            font-size 14px;
            color #459BEA
            height 14px
            line-height 14px
            margin-top 10px
        }
        .back{
            display inline-block;
            height:26px;
            width: 26px;
            border: 1px solid #4C97DB;
            border-radius: 50%;
            text-align:center;
            line-height 26px;
            font-size 20px;
            color #4C97DB;
            margin-right 10px;
            cursor pointer
        }
        .name{
            font-size 14px
        }
    }
    .content{
        display flex;
        flex-wrap wrap;
        margin 10px 0;
        .process{
            display flex;
            place-items center;
            .contentList{
                height 30px;
                line-height 30px;
                border 1px solid #E9EBED;
                font-size 14px;
                width 90px;
                padding 0 10px;
                font-weight 600;
                position relative;
                cursor pointer;
                border-radius 4px;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap
                text-align center
                margin 5px 0
                &.publish{
                    border-color #459BEA;
                    color #459BEA
                }
                &.current{
                    background #459BEA;
                    color white;
                    .logo{
                        background white;
                        color #459BEA
                    }

                }
            }
            .line{
                height 36px;
                width 35px;
                display flex;
                align-items center; 
                padding 0 5px;
                &.current{
                    span{
                        border-color #459BEA; 
                    }
                    i {
			            border-left-color #459BEA;
                    }
                }
                span{
                    width:100%;
                    border-top 2px solid #9B989C
                }
                i{
                    width 0;
                    height 0;
                    border:6px solid transparent;
			        border-left-color:#9B989C;
                }
                
            }
            .logo{
                width 15px;
                height 15px;
                background #459BEA;
                color white;
                text-align center;
                line-height 15px;
                border-radius 50%;
                position absolute;
                bottom 3px;
                right 3px
            }
            &.arrow{
                border none;
                .logo{
                    display none;
                }
            }
        }
    }
    .recommend{
        display flex;
        place-items center;
        .recommend_content{
            line-height 36px;
            font-size 14px;
            border 1px solid #E9EBED;
            margin 8px 0;
            padding 0 15px;
            border-radius 5px;
            width 95%
            &.currentWords{
                border-color #459BEA
                color #459BEA
            }
        }
        .logo{
            width 15px;
            height 15px;
            background #459BEA;
            color white;
            text-align center;
            line-height 15px;
            border-radius 50%;
            margin-left 10px
        }
    }
}
</style>